<!DOCTYPE html>
<!--[if lt IE 7]> <html dir="ltr" lang="en-US" class="ie6"> <![endif]-->
<!--[if IE 7]>    <html dir="ltr" lang="en-US" class="ie7"> <![endif]-->
<!--[if IE 8]>    <html dir="ltr" lang="en-US" class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html dir="ltr" lang="en-US"> <!--<![endif]-->

<!-- BEGIN head -->
<head>

	<!--Meta Tags-->
	<meta name="viewport" content="width=device-width; initial-scale=1.0" />
	
		
	<!--Title-->
	<title>Organic Shop - A Premium HTML Template for Ecommerce Websites</title>

	<!--Stylesheets-->
	<link rel="stylesheet" href="css/superfish.css" type="text/css" media="all" />
	<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="all" />
	<link type="text/css" href="css/jqueryui/jquery.ui.datepicker.css" rel="stylesheet" />
	<link rel="stylesheet" href="style.css" type="text/css" media="all" />
	<link rel="stylesheet" href="css/responsive.css" type="text/css" media="all" />
	<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="all" />
	<link rel="stylesheet" href="css/colours/green.css" type="text/css" media="all" />
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css' />
	<link href='http://fonts.googleapis.com/css?family=Cardo:400,400italic,700' rel='stylesheet' type='text/css' />

	<!--Favicon-->
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

	<!--JavaScript-->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js'></script>
	<script type='text/javascript' src='js/jquery.prettyPhoto.js'></script>
	<script type="text/javascript" src="js/superfish.js"></script>
	<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
	<script type="text/javascript" src="js/scripts.js"></script>
	
	<!--[if (gte IE 6)&(lte IE 8)]>
		<script type="text/javascript" src="js/selectivizr-min.js"></script>
	<![endif]-->

<!-- END head -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<!-- BEGIN body -->
<body>
	
	<!-- BEGIN .wrapper -->
	<div class="wrapper">
		
		<!-- BEGIN .topbar -->
		<div class="topbar clearfix">
			
			<!-- BEGIN .social-icons -->
			<ul class="social-icons">
				<li><a href="#"><span id="twitter_icon"></span></a></li>
				<li><a href="#"><span id="facebook_icon"></span></a></li>
				<li><a href="#"><span id="googleplus_icon"></span></a></li>
				<li><a href="#"><span id="skype_icon"></span></a></li>
				<li><a href="#"><span id="flickr_icon"></span></a></li>
				<li><a href="#"><span id="linkedin_icon"></span></a></li>
				<li><a href="#"><span id="vimeo_icon"></span></a></li>
				<li><a href="#"><span id="youtube_icon"></span></a></li>
				<li><a href="#"><span id="rss_icon"></span></a></li>
			<!-- END .social-icons -->
			</ul>
			
			<!-- BEGIN .topbar-right -->
			<div class="topbar-right clearfix">
				
				<ul class="clearfix">
					<li class="checkout-icon"><a href="checkout.html">Checkout</a></li>
					<li class="myaccount-icon"><a href="my-account.html">My Account</a></li>
				</ul>
		
				<div class="cart-top">
					<p><a href="cart.html">9 Items</a></p>
				</div>
				
			<!-- END .topbar-right -->
			</div>
		
		<!-- END .topbar -->
		</div>
		
		<!-- BEGIN #site-title -->
		<div id="site-title">
			<a href="index.html">
				<h1>Organic <span>shop</span></h1>
			</a>
		<!-- END #site-title -->
		</div>
		
		<!-- BEGIN .main-menu-wrapper -->
		<div id="main-menu-wrapper" class="clearfix">
			
			<ul id="main-menu" class="fl">
				<li><a href="index.html">Home</a></li>
				<li><a href="products.html">Products</a>
					<ul>
						<li><a href="product-single.html">Cleansers</a></li>
						<li><a href="product-single.html">Exfoliators &amp; Masks</a></li>
						<li><a href="product-single.html">Toners</a></li>
						<li><a href="product-single.html">Moisturisers</a>
							<ul>
								<li><a href="product-single.html">Hands</a></li>
								<li><a href="product-single.html">Face</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="blog.html">Blog</a></li>
				<li><a href="testimonials.html">Testimonials</a></li>
				<li class="current_page_item"><a href="typography.html">About</a>
					<ul>
						<li><a href="typography.html">Typography</a></li>
						<li><a href="js-elements.html">JS Elements</a></li>
					</ul>
				</li>
				<li><a href="contact.html">Contact</a></li>	
			</ul>
			
			<form method="get" action="#" id="menu-search" class="fr" />
				<input type="text" name="s" />
			</form>
		
		<!-- END .main-menu-wrapper -->	
		</div>
		
		<div id="page-header">
			<img src="images/page-header1.jpg" alt="" />
		</div>
		
		<!-- BEGIN .section -->
		<div class="section">
			
			<ul class="columns-content page-content clearfix">
				
				<!-- BEGIN .col-main -->
				<li class="col-main">
					
					<h2 class="page-title">Typography</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus mauris quis tellus venenatis laoreet. Morbi velit metus, sollicitudin sed molestie ut, bibendum blandit dui. Ut dictum, diam sed blandit euismod, velit nunc laoreet felis, et tempus sem risus rhoncus magna. In hac habitasse platea dictumst.</p>
					
					<h1>H1 Tag</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus mauris quis tellus venenatis laoreet. Morbi velit metus, sollicitudin sed molestie ut, bibendum blandit dui. Ut dictum, diam sed blandit euismod, velit nunc laoreet felis, et tempus sem risus rhoncus magna. In hac habitasse platea dictumst.</p>
					
					<h2>H2 Tag</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus mauris quis tellus venenatis laoreet. Morbi velit metus, sollicitudin sed molestie ut, bibendum blandit dui. Ut dictum, diam sed blandit euismod, velit nunc laoreet felis, et tempus sem risus rhoncus magna. In hac habitasse platea dictumst.</p>
					
					<h3>H3 Tag</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus mauris quis tellus venenatis laoreet. Morbi velit metus, sollicitudin sed molestie ut, bibendum blandit dui. Ut dictum, diam sed blandit euismod, velit nunc laoreet felis, et tempus sem risus rhoncus magna. In hac habitasse platea dictumst.</p>
					
					<h4>H4 Tag</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus mauris quis tellus venenatis laoreet. Morbi velit metus, sollicitudin sed molestie ut, bibendum blandit dui. Ut dictum, diam sed blandit euismod, velit nunc laoreet felis, et tempus sem risus rhoncus magna. In hac habitasse platea dictumst.</p>
					
					<h5>H5 Tag</h5>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus mauris quis tellus venenatis laoreet. Morbi velit metus, sollicitudin sed molestie ut, bibendum blandit dui. Ut dictum, diam sed blandit euismod, velit nunc laoreet felis, et tempus sem risus rhoncus magna. In hac habitasse platea dictumst.</p>
					
					<h6>H6 Tag</h6>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus mauris quis tellus venenatis laoreet. Morbi velit metus, sollicitudin sed molestie ut, bibendum blandit dui. Ut dictum, diam sed blandit euismod, velit nunc laoreet felis, et tempus sem risus rhoncus magna. In hac habitasse platea dictumst.</p>
					
					<h2>Blockquote</h2>
					<blockquote>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus mauris quis tellus venenatis laoreet. Morbi velit metus, sollicitudin sed molestie ut, bibendum blandit dui. Ut dictum, diam sed blandit euismod, velit nunc laoreet felis, et tempus sem risus rhoncus magna. In hac habitasse platea dictumst.</p>
					</blockquote>

					<h2>Dropcap</h2>
					<p><span class="dropcap">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus mauris quis tellus venenatis laoreet. Morbi velit metus, sollicitudin sed molestie ut, bibendum blandit dui. Ut dictum, diam sed blandit euismod, velit nunc laoreet felis, et tempus sem risus rhoncus magna. In hac habitasse platea dictumst.</p>

					<h2>Buttons</h2>
					<p style="display: block;margin:0;"><a href="#" class="button1">Button Style 1</a></p>
					<div style="clear:both;height:20px;"></div>
					<p style="display: block;margin:0;"><a href="#" class="button2">Button Style 2</a></p>
					<div style="clear:both;height:20px;margin:0;"></div>
					<p style="display: block;"><a href="#" class="button3">Button Style 3</a></p>
					<div style="clear:both;height:20px;margin:0;"></div>
					<p style="display: block;"><a href="#" class="button4">Button Style 4</a></p>
					<div style="clear:both;height:20px;margin:0;"></div>
					<p style="display: block;"><a href="#" class="button4" style="background: #80b600; color: #fff; border: none;">Button Style 4 (Custom Colour)</a></p>
					<div style="clear:both;height:30px;margin:0;"></div>

					<h2>Table</h2>
					<table>
						<thead>
							<tr>
								<th>Title 1</th>
								<th>Title 2</th>
								<th>Title 3</th>
								<th>Title 4</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td data-title="Title 1">Content 1</td>
								<td data-title="Title 2">Content 1</td>
								<td data-title="Title 3">Content 1</td>
								<td data-title="Title 4">Content 1</td>
							</tr>
							<tr>
								<td data-title="Title 1">Content 2</td>
								<td data-title="Title 2">Content 2</td>
								<td data-title="Title 3">Content 2</td>
								<td data-title="Title 4">Content 2</td>
							</tr>
							<tr>
								<td data-title="Title 1">Content 3</td>
								<td data-title="Title 2">Content 3</td>
								<td data-title="Title 3">Content 3</td>
								<td data-title="Title 4">Content 3</td>
							</tr>
							<tr>
								<td data-title="Title 1">Content 4</td>
								<td data-title="Title 2">Content 4</td>
								<td data-title="Title 3">Content 4</td>
								<td data-title="Title 4">Content 4</td>
							</tr>
						</tbody>
					</table>

					<h2>Alert &amp; Messages</h2>
					<div class="msg default"><p>This is an information message, it's not very important</p></div>
					<div class="msg notice"><p>This is a notice message, might be worth paying attention</p></div>
					<div class="msg success"><p>This is a success message, well done!</p></div>
					<div class="msg fail"><p>This is an error message, uh oh!</p></div>
	
					<ul class="columns-2 clearfix">
						<li class="col2">
							
							<h2>List Style #1</h2>
							<ul class="list1">
								<li>List Item #1</li>
								<li>List Item #1</li>
								<li>List Item #1</li>
								<li>List Item #1</li>
							</ul>
							
						</li>
						<li class="col2">
							
							<h2>List Style #2</h2>
							<ul class="list2">
								<li>List Item #1</li>
								<li>List Item #1</li>
								<li>List Item #1</li>
								<li>List Item #1</li>
							</ul>
							
						</li>
					</ul>
	
					<ul class="columns-2 clearfix">
						<li class="col2">
							
							<h2>List Style #3</h2>
							<ul class="list3">
								<li>List Item #1</li>
								<li>List Item #1</li>
								<li>List Item #1</li>
								<li>List Item #1</li>
							</ul>
							
						</li>
						<li class="col2">
							
							<h2>List Style #4</h2>
							<ul class="list4">
								<li>List Item #1</li>
								<li>List Item #1</li>
								<li>List Item #1</li>
								<li>List Item #1</li>
							</ul>
							
						</li>
					</ul>
								
					<ul class="columns-2 clearfix">
						<li class="col2">

							<h2>Unordered List Default</h2>
							<ul>
								<li>List Item #1</li>
								<li>List Item #1</li>
								<li>List Item #1</li>
								<li>List Item #1</li>
							</ul>

						</li>
						<li class="col2">

							<h2>Ordered List Default</h2>
							<ol>
								</ol></li><li>List Item #1</li>
								<li>List Item #1</li>
									<ol>
										<li>List Item #1</li>
										<li>List Item #1</li>
									</ol>
								<li>List Item #1</li>
								<li>List Item #1</li>
							

						
					</ul>
				
				<!-- END .col-main -->
				
				
				<!-- BEGIN .col-sidebar -->
				<li class="col-sidebar">
				
					<div class="widget">
						<div class="widget-title clearfix"><h4 class="tag-title">Categories</h4></div>
						<ul>
							<li><a href="#">Skin Care</a></li>
							<li><a href="#">Bath &amp; Body Care</a></li>
							<li><a href="#">Fragrance</a></li>
							<li><a href="#">Make-Up</a></li>
							<li><a href="#">Hair</a></li>
							<li><a href="#">Moisturisers</a></li>
						</ul>
					</div>
					
					<div class="widget">
						<div class="widget-title clearfix"><h4 class="tag-title">Tags</h4></div>
						<ul class="wp-tag-cloud clearfix">
							<li><a href="#">Tag #1</a></li>
							<li><a href="#">Tag #2</a></li>
							<li><a href="#">Tag #3</a></li>
							<li><a href="#">Tag #4</a></li>
							<li><a href="#">Tag #5</a></li>
							<li><a href="#">Tag #6</a></li>
						</ul>
					</div>
					
					<div class="widget">
						<div class="widget-title clearfix"><h4 class="tag-title">Recent Posts</h4></div>
						
						<ul class="latest-posts-list clearfix">
							
							<li class="clearfix">
								<div class="lpl-img">
									<a href="blog-single.html" rel="bookmark">
										<img width="66" height="66" src="images/blog-thumb1.jpg" alt="" />
									</a>
								</div>
								<div class="lpl-content">
									<h6><a href="blog-single.html" rel="bookmark">Dasellus ac nibh urna donec 
									ac urna</a> <span> Posted Jun 13, 2012 By admin</span></h6>
								</div>
							</li>
							
							<li class="clearfix">
								<div class="lpl-img">
									<a href="blog-single.html" rel="bookmark">
										<img width="66" height="66" src="images/blog-thumb2.jpg" alt="" />
									</a>
								</div>
								<div class="lpl-content">
									<h6><a href="blog-single.html" rel="bookmark">Dasellus ac nibh urna donec 
									ac urna</a> <span> Posted Jun 13, 2012 By admin</span></h6>
								</div>
							</li>
							
							<li class="clearfix">
								<div class="lpl-img">
									<a href="blog-single.html" rel="bookmark">
										<img width="66" height="66" src="images/blog-thumb3.jpg" alt="" />
									</a>
								</div>
								<div class="lpl-content">
									<h6><a href="blog-single.html" rel="bookmark">Dasellus ac nibh urna donec 
									ac urna</a> <span> Posted Jun 13, 2012 By admin</span></h6>
								</div>
							</li>
							
						</ul>
					
					</div>
					
				<!-- END .col-sidebar -->
				</li>
				
			</li></ul>
			
		<!-- END .section -->
		</div>
		
		<!-- BEGIN #footer -->
		<div id="footer">
			
			<ul class="columns-4 clearfix">
				<li class="col4">
					
					<!-- BEGIN .widget -->
					<div class="widget">
						<div class="widget-title clearfix">
							<h6>Customer Services</h6>
						</div>
						
						<ul>
							<li class="contact-phone">+44 0123456789</li>
							<li class="contact-mail">mail [at] website [dot] com</li>
						</ul>
						
					<!-- END .widget -->
					</div>
					
				</li>
				<li class="col4">
					
					<!-- BEGIN .widget -->
					<div class="widget">
						<div class="widget-title clearfix">
							<h6>Categories</h6>
						</div>
						
						<ul>
							<li><a href="#">Skin Care</a></li>
							<li><a href="#">Bath &amp; Body Care</a></li>
							<li><a href="#">Fragrance</a></li>
							<li><a href="#">Make-Up</a></li>
							<li><a href="#">Hair</a></li>
							<li><a href="#">Moisturisers</a></li>
						</ul>
						
					<!-- END .widget -->
					</div>
					
				</li>
				<li class="col4">
					
					<!-- BEGIN .widget -->
					<div class="widget">
						<div class="widget-title clearfix">
							<h6>Tags</h6>
						</div>
						
						<ul class="wp-tag-cloud clearfix">
							<li><a href="#">Body Scrubs</a></li>
							<li><a href="#">Eye Care</a></li>
							<li><a href="#">Eyes</a></li>
							<li><a href="#">Lips</a></li>
							<li><a href="#">Cheeks</a></li>
							<li><a href="#">Candles</a></li>
							<li><a href="#">Shampoo</a></li>
							<li><a href="#">Conditioner</a></li>
							<li><a href="#">Body Wash</a></li>
						</ul>
						
					<!-- END .widget -->
					</div>
					
				</li>
				<li class="col4">
					
					<!-- BEGIN .widget -->
					<div class="widget">
						<div class="widget-title clearfix">
							<h6>Flickr</h6>
						</div>
						
						<div class="flickr_badge_wrapper clearfix">
							
							<div style="clear:both;margin:0 0 10px 0;"></div>
							<p class="button2"><a href="http://sc.chinaz.com/">sc.chinaz.com</a></p>
						</div>
						
					<!-- END .widget -->
					</div>
					
				</li>
			</ul>
		
		<!-- END #footer -->
		</div>
		
		<div id="footer-bottom" class="clearfix">
			
			<div class="fl">
				
				<ul>
					<li><a href="index.html">Home</a></li>
					<li><a href="blog.html">Blog</a></li>
					<li><a href="contact.html">Contact Us</a></li>
					<li><a href="products.html">Products</a></li>
				</ul>
				
				<p>&copy; Copyright 2013</p>
				
			</div>
			
			<div class="fr">
				<img src="images/payment-methods.png" alt="Payment Methods" />
			</div>
			
		</div>
			
	<!-- END .wrapper -->
	</div>
	
<!-- END body -->
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</body>
</html>